<template>
	<view class="userPost">
		<view class="tab dis" v-if="postType == 1">
			<template v-for="item in tabVal2" :key="item.tabId">
				<view class="tabItem" :class="tabAct2 == item.tabId ? 'avtive' : ''" @click="changeTab2(item.tabId)">
					<view class="tabName">{{ item.name }}</view>
				</view>
			</template>
		</view>
		<view class="tab dis" v-if="postType != 3">
			<template v-for="item in tabVal" :key="item.tabId">
				<view class="tabItem" :class="tabAct == item.tabId ? 'avtive' : ''" @click="changeTab(item.tabId)">
					<view class="tabName">{{ item.name }}</view>
				</view>
			</template>
		</view>
		<view class="postList p30" v-if="list.length > 0">
			<view class="postItem p30" v-if="tabAct == 1" v-for="item in list" :key="item.id" @click="clickPost(item.id)">
				<view class="itemUser dis">
					<view class="userImg">
						<image :src="item.userAvatar" mode=""></image>
					</view>
					<view class="userInfo dis">
						<view class="infoL">
							<view class="name">{{ item.userName }}</view>
							<view class="time">{{ item.createTime }}</view>
						</view>
						<view class="infoR" v-if="item.isViolation">审核不通过</view>
					</view>
				</view>
				<view class="itemTit">{{ item.title }}</view>
				<view class="itemCon">{{ item.content }}</view>
				<view class="itemImg dis" v-for="ele in item.imageUrls" :key="ele" v-if="item.imageUrls.length > 0">
					<view class="imgItem">
						<image :src="ele" mode="aspectFill"></image>
					</view>
				</view>
				<view class="itemType">
					<view class="TypeVal">{{ item.plateName }}</view>
				</view>
				<view class="postBot" v-if="!item.deleteReason">
					<view class="postBut dis">
						<view class="but dis">
							<view class="butI">
								<image src="/pages/static/6.png" mode=""></image>
							</view>
							<view class="butNum">{{ item.postNum }}</view>
						</view>
						<view class="but dis">
							<view class="butI">
								<image src="/pages/static/5.png" mode=""></image>
							</view>
							<view class="butNum">{{ item.likeNum }}</view>
						</view>
					</view>
					<!-- <view class="err">驳回理由：广告营销</view> -->
				</view>
				<view class="delCause" v-if="item.deleteReason">删除原因：{{ item.deleteReason }}</view>
			</view>
			<view class="postItem p30" v-if="tabAct == 2" v-for="item in list" :key="item.id" @click="clickPost(item.threadId)">
				<view class="replyT">{{ item.topVal }}</view>
				<view class="replyC">{{ item.tit }}</view>
				<view class="replyCon p20 dis">
					<view class="replyConL">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="replyConR ellipsis">{{ item.con }}</view>
				</view>
				<view class="replyB dis" v-if="!item.deleteReason">
					<view class="RT">
						<view class="TypeVal">{{ item.type }}</view>
					</view>
					<view class="RTI">{{ item.time }}</view>
				</view>
				<view class="delCause" v-if="item.deleteReason">删除原因：{{ item.deleteReason }}</view>
			</view>
			<view class="skeleton" v-if="list.length < total && list.length > 10">
				<up-skeleton rows="3" title loading></up-skeleton>
			</view>
			<view class="noData" v-else>没有更多内容了，亲~</view>
		</view>
		<view class="noData" v-else>暂无数据</view>
	</view>
</template>

<script setup>
import { getDelPost, getDelRemark, userLikePost, userLikeRemark, userPost, userRemark, userWatch } from '@/config/api.js';
import { ref } from 'vue';
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app';
import { uploadImage } from '@/util/util.js';
const postType = ref('1');
const tabVal = ref([]);
const tabVal2 = ref([]);
onShow(() => {
	console.log('onShow');
});
onLoad((options) => {
	postType.value = options.type;
	if (options.type == 1) {
		tabVal2.value = [
			{
				tabId: 1,
				name: '我发布的'
			},
			{
				tabId: 2,
				name: '我删除的'
			}
		];
		tabVal.value = [
			{
				tabId: 1,
				name: '帖子'
			},
			{
				tabId: 2,
				name: '回帖'
			}
		];
		uni.setNavigationBarTitle({
			title: '我的帖子'
		});
	} else if (options.type == 2) {
		tabVal.value = [
			{
				tabId: 1,
				name: '我点赞的主题'
			},
			{
				tabId: 2,
				name: '我点赞的评论'
			}
		];
		uni.setNavigationBarTitle({
			title: '我的点赞'
		});
	} else {
		uni.setNavigationBarTitle({
			title: '我的插眼'
		});
	}
	getList();
});
const tabAct = ref(1);
const tabAct2 = ref(1);
const changeTab = (val) => {
	tabAct.value = val;
	pageNum.value = 1;
	list.value = [];
	total.value = 0;
	getList();
};
const changeTab2 = (val) => {
	tabAct2.value = val;
	if (val == 1) {
		tabVal.value = [
			{
				tabId: 1,
				name: '帖子'
			},
			{
				tabId: 2,
				name: '回帖'
			}
		];
	} else {
		tabVal.value = [
			{
				tabId: 1,
				name: '删除的帖子'
			},
			{
				tabId: 2,
				name: '删除的评论'
			}
		];
	}
	tabAct.value = tabVal.value[0].tabId;
	pageNum.value = 1;
	list.value = [];
	total.value = 0;
	getList();
};

const request = ref(true);
const list = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(10);
const getList = async () => {
	const data = {
		pageNum: pageNum.value,
		pageSize: pageSize.value
	};
	if (postType.value == 1) {
		if (tabAct2.value == 1) {
			if (tabAct.value == 1) {
				const res = await userPost(data);
				// console.log(res);
				if (res.code == 0) {
					const newList = res.data.pageInfo.list.map((item) => {
						item.createTime = item.createTime.replace('T', ' ');
						item.userName = item.vestNickname ? item.vestNickname : item.author.nickname;
						item.userAvatar = item.vestAvatar ? item.vestAvatar : item.author.avatar;
						item.isViolation = false;
						item.violation = 'false';
						return item;
					});
					// console.log(newList);
					list.value = [...list.value, ...newList];
					total.value = res.data.pageInfo.total;
				}
			} else {
				const res = await userRemark(data);
				// console.log(res);
				if (res.code == 0) {
					const newList = res.data.pageInfo.list.map((item) => {
						item.createTime = item.createTime.replace('T', ' ');
						item.topVal = item.toCommentNickname != 'null' ? '' : `回复 ${item.toCommentNickname} :${item.content}`;
						item.tit = item.toCommentContent != 'null' ? '' : `评论内容： ${item.toCommentContent}`;
						item.img = item.forumThread.cover ? item.forumThread.cover : 'https://www.xiaoyixing.cn/assets/images/default_cover.png';
						item.con = item.forumThread.title;
						item.type = item.forumThread.plateName;
						item.time = item.createTime;
						return item;
					});
					list.value = [...list.value, ...newList];
					total.value = res.data.pageInfo.total;
				}
			}
		} else {
			if (tabAct.value == 1) {
				const res = await getDelPost(data);
				// console.log(res);
				if (res.code == 0) {
					const newList = res.data.pageInfo.list.map((item) => {
						item.createTime = item.createTime.replace('T', ' ');
						item.userName = item.vestNickname ? item.vestNickname : item.author.nickname;
						item.userAvatar = item.vestAvatar ? item.vestAvatar : item.author.avatar;
						item.isViolation = false;
						item.violation = 'false';
						return item;
					});
					console.log(newList);
					list.value = [...list.value, ...newList];
					total.value = res.data.pageInfo.total;
				}
			} else {
				const res = await getDelRemark(data);
				// console.log(res);
				if (res.code == 0) {
					const newList = res.data.pageInfo.list.map((item) => {
						item.createTime = item.createTime.replace('T', ' ');
						item.topVal = item.toCommentNickname != 'null' ? '' : `回复 ${item.toCommentNickname} :${item.content}`;
						item.tit = item.toCommentContent != 'null' ? '' : `评论内容： ${item.toCommentContent}`;
						item.img = item.forumThread.cover ? item.forumThread.cover : 'https://www.xiaoyixing.cn/assets/images/default_cover.png';
						item.con = item.forumThread.title;
						item.type = item.forumThread.plateName;
						item.time = item.createTime;
						return item;
					});
					list.value = [...list.value, ...newList];
					total.value = res.data.pageInfo.total;
				}
			}
		}
	} else if (postType.value == 2) {
		if (tabAct.value == 1) {
			const res = await userLikePost(data);
			// console.log(res);
			if (res.code == 0) {
				const newList = res.data.pageInfo.list.map((item) => {
					item.createTime = item.createTime.replace('T', ' ');
					item.userName = item.vestNickname ? item.vestNickname : item.author.nickname;
					item.userAvatar = item.vestAvatar ? item.vestAvatar : item.author.avatar;
					item.isViolation = false;
					item.violation = 'false';
					return item;
				});
				// console.log(newList);
				list.value = [...list.value, ...newList];
				total.value = res.data.pageInfo.total;
			}
		} else {
			const res = await userLikeRemark(data);
			// console.log(res);
			if (res.code == 0) {
				const newList = res.data.pageInfo.list.map((item) => {
					item.likeTime = item.likeTime.replace('T', ' ');
					item.createTime = item.createTime.replace('T', ' ');
					item.topVal = item.content;
					item.tit = `点赞时间:${item.likeTime}`;
					item.img = 'https://www.xiaoyixing.cn/assets/images/default_cover.png';
					item.con = item.forumThread.title;
					item.type = item.forumThread.plateName;
					item.time = item.createTime;
					return item;
				});
				list.value = [...list.value, ...newList];
				total.value = res.data.pageInfo.total;
			}
		}
	} else {
		const res = await userWatch(data);
		// console.log(res);
		if (res.code == 0) {
			const newList = res.data.pageInfo.list.map((item) => {
				item.createTime = item.createTime.replace('T', ' ');
				item.userName = item.vestNickname ? item.vestNickname : item.author.nickname;
				item.userAvatar = item.vestAvatar ? item.vestAvatar : item.author.avatar;
				item.isViolation = false;
				item.violation = 'false';
				return item;
			});
			// console.log(newList);
			list.value = [...list.value, ...newList];
			total.value = res.data.pageInfo.total;
		}
	}
	request.value = true;
};
const clickPost = (id) => {
	// console.log(item)
	uni.navigateTo({
		url: `/post/post/postDetails?id=${id}`
	});
};
onReachBottom(() => {
	console.log('触底加载');
	if (list.value.length >= total.value) {
		console.log('没有更多内容了');
	} else {
		pageNum.value++;
		getList();
	}
});
</script>

<style lang="scss" scoped>
.userPost {
	width: 100%;
	.tab {
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 26rpx;
		background-color: #fff;
		.tabItem {
			// width: 120rpx;
			text-align: center;
			color: #656565;
		}
		.avtive {
			position: relative;
			color: #000;
			font-weight: 700;
			font-size: 30rpx;
		}
		.avtive::after {
			position: absolute;
			bottom: 0;
			left: 50%;
			display: block;
			content: '';
			width: 45rpx;
			height: 8rpx;
			border-radius: 8rpx;
			background: #179bf1;
			transform: translateX(-60%);
		}
	}
	.postItem {
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		// box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1), 0 6px 20rpx rgba(0, 0, 0, 0.1);
		-webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
		box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
		overflow: hidden;
		.itemUser {
			.userImg {
				margin-right: 30rpx;
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				overflow: hidden;
				background-color: #ccc;
			}
			.userInfo {
				flex: 1;
				justify-content: space-between;
				align-items: center;
				.infoL {
					.name {
						font-weight: 700;
						color: #000;
					}
					.time {
						color: #888;
						font-size: 24rpx;
					}
				}
				.infoR {
					padding: 5rpx 10rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
					color: #e53e31;
					border: 2rpx solid #e53e31;
				}
			}
		}
		.itemTit {
			margin-top: 20rpx;
			font-size: 28rpx;
		}
		.itemCon {
			margin-top: 20rpx;
			font-size: 28rpx;
		}
		.itemImg {
			margin-top: 20rpx;
			width: 100%;
			overflow: hidden;
			.imgItem {
				flex: 0 0 22.5%;
				margin-right: 20rpx;
				width: 152rpx;
				height: 152rpx;
				overflow: hidden;
				border-radius: 10rpx;
				background: #6f7d8c;
			}
		}
		.itemType {
			margin-top: 20rpx;
			width: 100%;
			.TypeVal {
				display: inline-block;
				padding: 5rpx 10rpx;
				border-radius: 10rpx;
				font-size: 24rpx;
				background: #f8f8f8;
			}
		}
		.postBot {
			margin-top: 20rpx;
			padding-top: 15rpx;
			border-top: 2rpx solid #eee;
			.postBut {
				justify-content: space-around;
				align-items: center;
				.but {
					.butI {
						image {
							width: 32rpx;
							height: 32rpx;
						}
					}
					.butNum {
						padding-top: 5rpx;
						margin-left: 20rpx;
						font-size: 24rpx;
						color: #555;
					}
				}
			}
		}
		.replyC {
			margin-top: 20rpx;
			color: #8f8e94;
			font-size: 26rpx;
		}
		.replyCon {
			align-items: center;
			margin-top: 20rpx;
			background-color: #f7f7fa;
			border-radius: 20rpx;
			.replyConL {
				width: 130rpx;
				height: 130rpx;
				border-radius: 20rpx;
				overflow: hidden;
				background-color: #f7f7fa;
			}
			.replyConR {
				margin-left: 20rpx;
			}
		}
		.replyB {
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			.RT {
				.TypeVal {
					display: inline-block;
					padding: 5rpx 10rpx;
					border-radius: 10rpx;
					font-size: 24rpx;
					background: #f8f8f8;
				}
			}
			.RTI {
				color: #888;
				font-size: 24rpx;
			}
		}
		.delCause {
			margin-top: 20rpx;
			padding-top: 15rpx;
			border-top: 2rpx solid #eee;
		}
	}
}
</style>
<style>
page {
	background-color: #f8f8f8;
}
image {
	width: 100%;
	height: 100%;
}
.noData {
	width: 100%;
	color: #999;
	text-align: center;
}
</style>
